<script setup lang="ts">
const defaultFomr = {
  question: 1,
  answer: '',
  password: '',
  code:'',
}
let form = reactive(defaultFomr);
</script>

<template>
  <div>
    <AuthenText>
<pre>
操作保护设置说明：
1、请认真设置以下资料以及操作保护问题和答案，并请牢记，在您操作某些关键功能时，系统为了保障您的账户安全将要求您回答相关问题；
2、以下信息一旦设置无法自助更改，以下信息设置后以后将是核对您本人身份的唯一凭证(所以请务必设置真实) ；
3、为了保护您的隐私，您以下设置的信息设置后不会出现在您的账户前台，并且我们承诺，绝对保证不会泄露客户任何信息，所以请您放心。
</pre>
    </AuthenText>
    <el-card class="flex-1">
      <el-form label-suffix="：" label-width="100px" class="w-1/2 mx-52">
        <div class="text-[var(--el-color-primary)] pl-20 my-5">您的正在修改账户操作保护</div>
        <el-form-item label="操作保护问题">
          你最亲近的（家人、朋友）的人的姓名
        </el-form-item>
        <el-form-item label="操作保护答案">
          <el-input placeholder="请填写你的答案" v-model="form.answer" clearable></el-input>
        </el-form-item>
        <el-form-item label="绑定邮箱">
          <div class="email-box">
            <div><el-input placeholder="请填写你的账户密码" v-model="form.password" clearable></el-input></div>
            <div><el-button type="primary">获取验证码</el-button></div>
          </div>

        </el-form-item>
        <el-form-item label="邮箱验证码">
          <div style="display: grid;grid-template-columns: 1fr 80px;width: 100%;">
            <div>
              <el-input  placeholder="请填写验证码" v-model="form.code" clearable></el-input>
            </div>
          </div>
        </el-form-item>
        <div class="text-center"><el-button type="primary">提交</el-button></div>
      </el-form>
    </el-card>
  </div>

</template>

<style scoped lang="scss">
.email-box{
  display: grid;grid-template-columns: 1fr 40px;grid-gap: 20px;width: 100%
}
</style>